<template>
	<view class="container">
		<template v-if="empty">
			<view class="tabsContent">
				<u-empty mode="data" width="280" height="280" textSize="28"
					icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无新闻数据"></u-empty>
			</view>
		</template>
		<template v-else>
			<view class="news-box" v-for="item in list" @click="toNews(item)">
				<!-- 图片 -->
				<image class="news-img" :src="item.picUrl" mode="aspectFill"></image>
				<!-- 标题 时间 -->
				<view class="news-content">
					<view class="news-title">
						{{item.title}}
					</view>
					<view class="news-time">{{item.creatTime}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		name: '',
		components: {},
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				list: [],
				num: null, //条数
				empty: false, //是否为空

			}
		},
		onShow() {
			const that = this;
			this.list = []
			this.pageNum = 1
			this.num = null
			that.getNews()
		},
		mounted() {},
		destroyed() {},
		methods: {
			// 获取新闻列表
			getNews() {
				let housingId = uni.getStorageSync('housingId')
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: 3, //1公告  2广告  3新闻
					housingId: housingId
				}
				api.getNotice(data).then(res => {
					console.log(res)
					if (res.data.code == 601) {
						this.empty = true
					} else if (res.data.code == 200) {
						this.empty = false
						console.log(res.data.rows)
						this.list = this.list.concat(res.data.rows)
						this.num = Math.ceil(res.data.total / this.pageSize) //总条数除一页多少条向上取整
						this.pageNum++
						console.log(this.list)
					}
				})
			},
			// 点击跳转新闻详情
			toNews(item) {
				uni.$u.route({
					type: "navigateTo",
					url: "/pages/news/details",
					params: {
						id: item.id
					}
				});
			}
		},
		onReachBottom() {
			// 触底的时候请求数据，即为上拉加载更多
			if (this.pageNum <= this.num) {
				this.getNews()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			const _that = this
			_that.pageNum = 1
			_that.list = []
			_that.num = null
			setTimeout(function() {
				uni.stopPullDownRefresh();
				_that.getNews();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 32rpx);
		padding: 16rpx;

		.tabsContent {
			width: 100%;
			background-color: #FFFFFF;
			height: 1000rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.news-box {
		width: calc(100% - 64rpx);
		padding: 32rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0 20rpx 1px #f0f0f0;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;

		.news-img {
			width: 288rpx;
			height: 180rpx;
			margin-right: 48rpx;
			border-radius: 8rpx;
		}

		.news-content {
			flex: 1;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.news-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				text-overflow: ellipsis;
				/*设置隐藏部分为省略号*/
				overflow: hidden;
				/*设置隐藏*/
				display: -webkit-box;
				-webkit-line-clamp: 3;
				/*设置显示行数，此处为2行，可设置其他数字*/
				-webkit-box-orient: vertical;
			}

			.news-time {
				font-size: 24rpx;
				color: #999999;
			}

		}
	}
</style>
